<!--

2023/02/17 luchuan
当前页面（分类节点）由productTempDescDetail、productFmlDescDetail等多个产品页面引用当做子页面使用
在修改当前页面时，请慎重

-->

<template>
  <div>
    <el-form ref="ref_translateObj" :model="translateObj" :rules="rulesTranslateObj" label-width="100px">
      <el-form-item label="翻译工具：" prop="translationToolType">
        <el-radio-group v-model="translateObj.translationToolType">
          <el-radio label="baidu">百度翻译</el-radio>
          <el-radio label="google" disabled>谷歌翻译</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="源语言：" prop="countryFrom">
        <el-radio-group v-model="translateObj.countryFrom">
          <el-radio label="UK">英语</el-radio>
          <el-radio label="CN">中文</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-col :span="24">
        <el-form-item label="目标语言：" prop="countryCodes">
          <el-checkbox :indeterminate="translateObj.indeterminate" v-model="translateObj.countryCodesCheckAll"
                       @change="translateObj_handleCheckAllChange">全选
          </el-checkbox>
          <div style="margin: 15px 0;"></div>
          <div>
            <el-checkbox-group v-model="translateObj.countryCodes" @change="translateObj_handleCheckedCitiesChange">
              <el-checkbox style="width: 100px" v-for="city in translateObj.countryCodeOptions" :label="city.dictValue"
                           :key="city.dictValue">{{city.dictLabel}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-col>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleTranslateTypeDialogClose">取 消</el-button>
      <el-button type="primary" @click="handleTranslateSubmit">执 行</el-button>
    </div>
  </div>
</template>

<script>

  import {
    handleTranslateSubmitTemp,
    handleTranslateSubmitFml,
  } from "@/api/amz/common/translate";

  export default {
    name: "translate",
    props:['productCodes','pageTempOrFml'],
    components: {},
    data() {
      return {
        // 选择翻译项弹出层
        //翻译表单
        translateObj: {
          translationToolType: "baidu",//翻译工具
          indeterminate: false,//全选按钮
          countryCodesCheckAll: false,
          countryCodes: [],//选中的站点
          countryCodeOptions: [],//站点列表
          cities: [],
          countryFrom: [],//源语言
        },
        //翻译表单校验
        rulesTranslateObj: {
          translationToolType: [
            {required: true, message: "翻译工具不能为空", trigger: "blur"}
          ],
          countryFrom: [
            {required: true, message: "源语言不能为空", trigger: "blur"}
          ],
          countryCodes: [
            {required: true, message: "目标语言不能为空", trigger: "blur"}
          ],
        },
      }
    },

    created() {
      //初始化多级字典
      this.initDicts();
      this.translateObj.countryCodes = [];//初始化为空
    },
    methods: {

      initDicts() {
        this.getDicts("qc_country_code").then(response => {
          this.translateObj.countryCodeOptions = response.data;//翻译选择站点
          response.data.forEach(countryCodesObj => {
            this.translateObj.cities.push(countryCodesObj.dictValue);
          })
        });
      },
      /**
       * 翻译-站点-复选框改变事件
       */
      translateObj_handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.translateObj.countryCodesCheckAll = checkedCount === this.translateObj.cities.length;
        this.translateObj.indeterminate = checkedCount > 0 && checkedCount < this.translateObj.cities.length;
      },
      /**
       * 翻译-全选站点
       */
      translateObj_handleCheckAllChange(val) {
        this.translateObj.countryCodes = val ? this.translateObj.cities : [];
        this.translateObj.indeterminate = false;
      },
      /**
       * 翻译-执行翻译提交
       */
      handleTranslateSubmit() {
        this.$refs["ref_translateObj"].validate(valid => {
          if (valid) {
            const reqData = new FormData();
            reqData.append("productCodes", this.productCodes);
            reqData.append("translationToolType", this.translateObj.translationToolType);
            reqData.append("countryFrom", this.translateObj.countryFrom);
            reqData.append("countryCodes", this.translateObj.countryCodes);

            this.loading = true;
            if (this.pageTempOrFml==="temp"){
              handleTranslateSubmitTemp(reqData).then(response => {
                this.msgSuccess(response.msg);
                this.loading = false;
                this.$emit("translateTypeDialogParent", "");
              }).catch((res) => {
                this.translateTypeDialog = false;
                this.loading = false;
              });
            }else if (this.pageTempOrFml==="fml"){
              handleTranslateSubmitFml(reqData).then(response => {
                this.msgSuccess(response.msg);
                this.loading = false;
                this.$emit("translateTypeDialogParent", "");
              }).catch((res) => {
                this.translateTypeDialog = false;
                this.loading = false;
              });
            }

          }
        })
      },

      /**
       * 翻译-取消按钮
       */
      handleTranslateTypeDialogClose() {
        this.$emit("translateTypeDialogClose", "");
      }

    }
  }
</script>

<style scoped>

</style>

<!--


&lt;!&ndash;以下代码共父页面使用当前翻译页面时，直接将html代码复制在父组件   开始&ndash;&gt;

&lt;!&ndash;html&ndash;&gt;
&lt;!&ndash;选择产品描述翻译内容&ndash;&gt;
<el-dialog title="翻译" :visible.sync="translateTypeDialog" width="55%" append-to-body :before-close="translateTypeDialogClose" >
  <translatePage v-if="translateTypeDialog" :productCodes="productCodes" pageTempOrFml="temp" @translateTypeDialogClose="translateTypeDialogClose" />
</el-dialog>

import translatePage from "../common/translate/translate";

components: {
product_temp_add_basic
,product_temp_add_rlat
,product_temp_add_desc
,translatePage
},

&lt;!&ndash;data&ndash;&gt;
// 选择翻译项弹出层
translateTypeDialog: false,

&lt;!&ndash;method&ndash;&gt;
/**
* 翻译-翻译按钮操作
*/
handleTranslate() {
const productCodes = this.productCodes;
if (productCodes.length > 0) {
this.translateTypeDialog = true;
} else {
this.msgError("请先选择产品数据！");
}
},
// 翻译-关闭窗口
translateTypeDialogClose() {
this.translateTypeDialog = false
},

&lt;!&ndash;结束&ndash;&gt;
-->



